<template>
    <div class="jianzhan-content">
        <Crumb :name="$t('serviceRequest.serviceRequest')"/>
        <div class="content">
            <el-button
                    type="primary"
                    @click="openAdd"
            >{{$t('serviceRequest.newRequest')}}
            </el-button>
            <Search>

                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        :placeholder="$t('serviceRequest.searchByNo')"
                        prefix-icon="el-icon-search"></el-input>
                <el-input
                        v-model="key1"
                        size="small"
                        class="input"
                        :placeholder="$t('serviceRequest.searchByCar')"
                        prefix-icon="el-icon-search"></el-input>
                <el-button
                    type="primary"
                    size="small"
                    @click="_search"
                >{{$t('search')}}</el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                    :data="questList"
                    @expand-change="expandChange"
                    @filter-change="filterChange"
                    border
                    row-key="id"
                    stripe
                    style="width: 100%"
                >
                    <el-table-column
                           type="expand"
                           :label="$t('detail')"
                    >
                        <template slot-scope="scope">
                            <quest-show :quest="scope.row"></quest-show>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="requestName"
                            :label="$t('serviceRequest.requestNo')"
                    ></el-table-column>
                    <el-table-column
                            prop="requestDate"
                            :label="$t('serviceRequest.requestDate')"
                    ></el-table-column>
                    <el-table-column
                            column-key="initiator"
                            prop="requestBy"
                            :label="$t('serviceRequest.requestBy')"
                            :filters="requestByFilters"
                    ></el-table-column>
                    <el-table-column
                            prop="plateNum"
                            :label="$t('serviceRequest.plateNum')"
                    ></el-table-column>
                    <el-table-column
                            column-key="typeCode"
                            prop="serviceType"
                            :label="$t('serviceRequest.serviceType')"
                            :filters="serviceTypeFilters"
                    ></el-table-column>
                    <el-table-column>
                        <template slot-scope="request">
                            <el-button size="small" @click="showDetail(request.row.id)">{{$t('detail')}}</el-button>
                            <el-button size="small" @click="deleteQuest(request.row.id)" type="danger">{{$t('delete')}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"> </el-pagination>
                </div>
            </div>
        </div>
        <quest-dialog v-if="showDialog"
                      :visible="showDialog"
                      :id="id"
                      @close="showDialog = false"
                      @addSuccess="addSuccess"/>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import questDialog from '@/components/service/questDialog'
    import {getQuestList, deleteQuest, showQuestDetail, getRequestBy} from "../../api/service";
    import questShow from '../../components/service/questShow'
    import {mapGetters} from 'vuex'
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import {arrayUnique} from "../../util";
    export default {
        name: "quest",
        mixins:[mixins],
        data(){
            return {
                requestByFilters:[],
                serviceTypeFilters:[
                    {text:"Maintaince",value:1},
                    {text:"Repair",value:2},
                    {text:"Warrenty",value:3},
                    {text:"Tire",value:4},
                ],
                list:[],
                quest:{},
                key:'',
                key1:'',
                showDialog:false,
                typeCode:'',
                initiator:'',
                id:0
            }
        },
        created(){
            this._getQuest();
            this.getRequestBy()
        },
        computed:{
            ...mapGetters(['pageSize']),
            questList(){
                return this.list
            }
        },
        methods:{
            async getRequestBy(){
                const {status,data} = await getRequestBy();
                if(status === ERROR_OK) {
                    this.requestByFilters = data.map(item=>({
                        text:item.contactName,
                        value:item.contactId
                    }))
                }
            },
            filterChange(column){
                this.pageNum = 1;
                Object.keys(column).forEach(item=>{
                    this[item] = column[item][0]
                });
                this._getQuest()
            },
            async expandChange(row){
                const {status, data} = await showQuestDetail(row.id);
                if (status === ERROR_OK) {
                    if (data.problemVoList.length) {
                        this.$set(row, 'problems', data.problemVoList);
                    } else {
                        this.$set(row, 'problems', [{
                            problemDescription: '',
                            problemPhoto: [],
                            problemVideo: [],
                            problemFile: []
                        }])
                    }
                }
            },
            addSuccess(){
                this.showDialog = false;
                this.id = 0;
                this._getQuest();
            },
            openAdd(){
                this.id = 0;
                this.showDialog = true
            },
            deleteQuest(id){
                this.$confirm('Do you want to delete this data ?','Warning', {
                    confirmButtonText: 'Yes',
                    cancelButtonText: "No",
                    type: 'warning',
                    center: true}).then(async () => {
                        const {status} = await deleteQuest(id);
                        if(status === ERROR_OK ){
                            this._getQuest()
                        }
                }).catch(()=>{})
            },
            handleFilter(value,row,column){
                const property = column['property'];
                return row[property] === value;
            },
            changePage(page){
                this.pageNum = page;
                this._getQuest()
            },
            async _getQuest(){
                const {status,data} = await getQuestList({
                    pageNum:this.pageNum,
                    requestNo:this.key,plateNum:this.key1,
                    typeCode:this.typeCode,
                    initiator:this.initiator
                });
                if (status === ERROR_OK) {
                    this.list = data.list;
                    this.total = data.total
                }
            },
            async _search(){
                this.pageNum = 1;
                this._getQuest()
            },
            showDetail(id){
                this.id = id;
                this.showDialog = true
            }
        },
        components:{
            Crumb,Search,questDialog,questShow
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content {
        @include content
    }
</style>